<template>
	<view>
		<view class="poster" id="main" style="position: fixed;">
			<image class="bgImg" :src="bgImg" mode="widthFix"></image>
			<view class="info flex-ac-jb bgfff">
				<view class="left">
					<view class="headImg flex-ac">
						<image :src="headImg" mode="aspectFill"></image>
						<text class="f32">{{vuex_userInfo.username}}</text>
					</view>
					<view class="desc flex-dc f26">
						<!-- <text>邀请你一起来赚大钱</text>
						<text>长按识别二维码 ></text> -->
						<text>{{synopsis}}</text>
					</view>
				</view>
				<view class="code">
					<image :src="vuex_userInfo.qrCode" mode="widthFix" style="height: auto;"></image>
				</view>
			</view>
		</view>
		<gui-popup ref="guipopup" width="580rpx">
			<view class="popup">
				<view class="gui-relative gui-box-shadow bgfff radius15">
					<image :src="imgSrc" mode="widthFix" style="width: 580rpx;border-radius: 15rpx 15rpx 0 0;"></image>
				</view>
				<view class="saveBtn">长按图片保存到相册</view>
			</view>
		</gui-popup>

	</view>
</template>

<script>
	import html2canvas from '../../common/html2canvas';
	export default {
		name: "poster",
		props: {
			bg: {
				type: String,
				default: ''
			},
			synopsis: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				imgSrc: '',
				bgImg: '',
				headImg: ''
			};
		},
		watch: {
			async bg(nVal, oVal) {
				this.bgImg = this.imgUrlTo64(this.bg)
				this.headImg = this.imgUrlTo64(this.vuex_userInfo.headPortrait)
			}
		},
		methods: {
			imgUrlTo64(url) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: url,
						responseType: 'arraybuffer', //最关键的参数，设置返回的数据格式为arraybuffer
						success: res => {
							//把arraybuffer转成base64
							let base64 = wx.arrayBufferToBase64(res.data);
							//不加上这串字符，在页面无法显示的哦
							base64 = 'data:image/jpeg;base64,' + base64
							console.log('base64=>', base64)
							resolve(base64)
							//打印出base64字符串，可复制到网页校验一下是否是你选择的原图片呢
						},
						fail: err => {
							reject(err)
						}
					})
				})
			},
			initPoster() {
				html2canvas(document.querySelector('#main'), {
					scale: 3, // 提高2倍的scale，相当于在渲染时放大2倍大小
					dpi: 300, //
					useCORS: true
				}).then((canvas2) => {
					// console.log(canvas2.toDataURL('image/png', 1.0));
					this.imgSrc = canvas2.toDataURL('image/png', 1.0)
					this.$refs.guipopup.open()
				})
			}

		}
	}
</script>

<style lang="less">
	.poster {
		width: 750rpx;
		right: -1000px;

		.bgImg {
			width: 750rpx;
		}

		.info {
			padding: 26rpx 33rpx 37rpx 40rpx;

			.left {
				.headImg {
					image {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						margin-right: 10rpx;
					}
				}

				.desc {
					margin-top: 24rpx;
				}
			}

			.code {
				image {
					width: 145rpx;
				}
			}

		}
	}

	.popup {
		.saveBtn {
			margin-top: 30rpx;
			height: 80rpx;
			font-size: 26rpx;
		}
	}
</style>